<template>
  <div class="login">
      <div class="form">
          <div class="title">
              <span>前锋科技后台管理</span>
          </div>


          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="ruleForm.pwd"></el-input>
                </el-form-item>
                
            
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">
                        登录
                    </el-button>
                    <el-button @click="resetForm('ruleForm')">
                        重置
                    </el-button>
                </el-form-item>
          </el-form>
      </div>
  </div>
</template>

<script>
import {setCookie } from '@/utils/cookie.js'
import {loginApi} from '@/utils/https.js'
export default {
data(){
    return{
         ruleForm: {
          name: '',
          pwd: '',
        },
          rules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
           pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 6, message: '长度在  6 个字符', trigger: 'blur' }
          ],
        }

    }
},
methods:{
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
          
            loginApi(this.ruleForm).then((res)=>{
                console.log(res);
                if(res.code == 200){
                    
                    //   1。存储token令牌
                      setCookie('token' , res.data.token);
                   
                      // 2。存储用户名数据
                      localStorage.setItem("role" , res.data.role);
                    //   3。跳转首页
                    this.$router.push('/');
                    // 4 提示
                    this.$message({

                        type:"success",
                        message:res.msg,
                        duration:1200,
                    })
                }else{
                    // console.log(this);
                    this.$message({
                        type:"error",
                        message:res.msg,
                        duration:1200,
                    })
                }
            })
          } else {
            alert('失败');
            console.log('error submit!!');
            return false;
          }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    }
}
}
</script>

<style lang='less' scoped>

.login{
    // font-size: 50px;
    width: 100%;
    height: 100vh;
    background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fm00%2Fe7%2Ff5%2F4be82635b9cf81ffdc1dd0e0f0204b51.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642423759&t=9f65e69d2861238381240b121597b9e5);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    .form{
        width: 300px;
        height: 300px;
        border: 2px solid #f5f5f5;
        background: white;
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        margin: auto;
    }
}
</style>